<template>
    <div class="color-picker">
      <button
        v-for="color in colors"
        :key="color"
        class="color-option"
        :style="{ backgroundColor: color }"
        :class="{ selected: selectedColor === color }"
        @click="selectColor(color)"
      ></button>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const props = defineProps({
    selectedColor: {
      type: String,
      required: true
    }
  })
  
  const emit = defineEmits(['color-change'])
  
  const colors = ref([
    '#E0F7FA', // 薄荷绿
    '#FCE4EC', // 蜜桃粉
    '#F3E5F5', // 薰衣草紫
    '#E8F5E9', // 浅绿色
    '#FFF8E1', // 浅黄色
    '#E0F2F1'  // 蓝绿色
  ])
  
  function selectColor(color) {
    emit('color-change', color)
  }
  </script>
  
  <style lang="scss" scoped>
  @import '../styles/_variables.scss';
  
  .color-picker {
    display: flex;
    gap: 0.5rem;
  }
  
  .color-option {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    
    &:hover {
      transform: scale(1.1);
    }
    
    &.selected {
      border-color: $primary-color;
      box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
      transform: scale(1.1);
    }
  }
  </style>